<template>
  <div class="banner_container">
    <div class="img_box">
      <img class="img_logo"
           src="../../assets/img/logo.png" />
    </div>
    <div class="menu_box">
      <div class="title">
        <b>{{titleName}}</b>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created () {
    let nowHref = window.location.href
    let hrefs = nowHref.split('/')
    let routerPath = '/addInfo/' + hrefs[hrefs.length - 1];
    this.setTitle(routerPath)
  },
  data () {
    return {
      titleName: '添加找对象'
    }
  },
  methods: {
    // 修改标题
    setTitle (routerPath) {
      console.log(routerPath)
      if (routerPath == '/addInfo/pair')
        this.titleName = '添加找对象'
      if (routerPath == '/addInfo/wantAdopt')
        this.titleName = '添加我要领养'
      if (routerPath == '/addInfo/loveAdopt')
        this.titleName = '添加爱心领养'
      if (routerPath == '/addInfo/lostFind')
        this.titleName = '添加丢失找寻'
    },

  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.setTitle(val.path)
      },
      // 深度观察监听
      deep: true
    }
  },

}
</script>
<style lang="less" scoped>
.banner_container {
  width: 100%;
  height: 10%;
  display: flex;
  background-color: rgba(255, 255, 255, 0.589);
  //   background-color: brown;
  position: relative;
  .img_box {
    text-align: center;
    width: 30%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.356);
    img {
      position: absolute;
      top: 50%;
      transform: translate(0, -40%);
      height: 60%;
    }
  }
  .menu_box {
    width: 70%;
    background-color: rgba(255, 255, 255, 0.356);
    //  background-color: red;
    height: auto;
    .title {
      // background-color: blue;
      position: absolute;
      left: 45%;
      top: 50%;
      transform: translate(-100%, -50%);
      b {
        font-size: 30px;
        font-weight: normal;
        color: rgb(71, 71, 71);
      }
    }
  }
}
</style>